<template>
	<view class="containers">
			<view>
			<view class="u-flex u-row-between u-m-r-20 u-p-t-20">
				<text>{{ item.project.name }}</text>
				<image @click="toProjectAllocation" style="width: 48rpx; height: 48rpx;" src="@/static/register/xy.png" mode=""></image>
			</view>
			<view class="xhx"></view>
			<view class="f-list u-flex u-p-b-20 u-p-t-20" v-for="(xitem, xindex) in item.projectUser" :key="xindex">
				<view class="qylg" :style="{ backgroundImage: 'url(' + logoMask + ')' }">
					<text class="u-line-2">{{ xitem.username }}</text>
					<text v-if="xitem.leader" class="tz" style="padding: 3 10upx;">团长</text>
				</view>
				<view class="f-item u-m-l-32" style="display:flex;flex-direction:column;flex:1">
					<view class="title u-flex u-m-t-12 u-row-between">
						<view class="fpbl u-m-r-40">
							<text>分配比例</text>
							<u-input v-if="checkLeader" class="fpblsz" placeholder="" v-model="xitem.proportion" />
							<text v-else>{{xitem.proportion}}</text>
							<text class="bfh">%</text>
						</view>
						<view class="fpbl">
							<text>项目保证金</text>
							<u-input v-if="checkLeader" class="fpblsz" placeholder="" v-model="xitem.balance" />
							<text v-else>{{xitem.balance}}</text>
							<text class="bfh">元</text>
						</view>
					</view>
					<u-input v-if="checkLeader" class="textarea" style="width:95%;" type="text" v-model="xitem.remark" placeholder="请输入分配描述" />
					<view class="u-flex" style="width: 98%;" v-else>{{xitem.remark}}</view>
				</view>
			</view>
		</view>
		<view v-if="checkLeader" class="caozuo u-flex u-row-around">
			<button class="baocun" @click="onClick(item)">保存</button>
			<button class="quxiao">取消</button>
		</view>
	</view>
</template>

<script>
	export default{
		name: "project-allocation",
		props: {
			item: Object, //数据
			checkLeader:{
				type: Boolean,
				default:false
			}
		},
		data() {
			return {
				form:{},
				logoMask: this.$mAssetsPath.logoMask,
			}
		},
		methods: {		
			onClick(item) {
				 this.$emit('click', {
				 	model: item
				 })
			}
		}
		
	}
</script>
<style scoped lang="scss">
.container {
	background-color: #fff;
}
.tdmc {
	line-height: 100rpx;
	width: 90%;
	margin-left: 5%;

	text {
		font-size: 30rpx;
		color: #0d1d36;
	}

	.right {
		position: absolute;
		left: 228rpx;
	}

	.jine {
		position: absolute;
		left: 228rpx;
		font-size: 30rpx;
		color: #ab61ff;
	}
}

.fgx {
	width: 100%;
	height: 20rpx;
	background-color: #f5f5f9;
}

.xmkk {
	width: 102rpx;
	height: 118rpx;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 bottom;

	text {
		color: #888d99;
		font-size: 26rpx;
		line-height: 118rpx;
		margin-left: 27rpx;
	}
}

.xmfp {
	color: #0d1d36;
	font-weight: bold;
}

.xmfpxj {
	width: 690rpx;
	background: #f5f5f9;
	border-radius: 10rpx;

	.tubiao {
		color: #0d1d36;
		font-size: 30rpx;
	}

	.xhx {
		width: 100%;
		height: 1rpx;
		background-color: #cacedb;
		margin-top: 20rpx;
	}
}

.file-name {
	width: 102rpx;
	height: 118rpx;
	background-size: 100% auto;
	background-position: 0 bottom;
	overflow: hidden;
	text-align: center;

	text {
		color: #888d99;
		font-size: 26rpx;
	}
}

.title {
	display: flex;
	width:90%;
	justify-content: space-between;
}

.tz {
	width: 68rpx;
	color: #ffffff;
	font-size: 24rpx;
	height: 36rpx;
	background: #ab61ff;
	border-radius: 6rpx;
	margin-left: 20rpx;
}

.name {
	font-size: 30rpx;
	color: #0d1d36;
	font-weight: bold;
}

.explain {
	color: #888d99;
	font-size: 26rpx;
}

.fpblsz,.textarea {
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2rpx solid #4b9cff;
	padding:2rpx 10rpx;
}

.textarea {height:60rpx;margin-bottom:10rpx;}
.fpbl {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text {
		font-size: 24rpx;
		color: #4b9cff;
	}

	.fpblsz,.textarea {
		display: flex;
		width: 100rpx;
		border: 2rpx solid #4b9cff;
		border-radius: 6rpx;
		margin-bottom: 10rpx;
		padding: 5rpx 10upx;
	}

	.bfh {
		font-size: 24rpx;
		margin-left: 15rpx;
	}
}

.ckqb {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #ff8f28;
	margin-top: 30rpx;
}

.xhx {
	width: 100%;
	height: 2rpx;
	background-color: #dadfed;
	margin-top: 34rpx;
}

.scxy {
	display: flex;
	align-items: center;
	width: 190rpx;
	height: 52rpx;
	border: 2rpx solid #ab61ff;
	border-radius: 26rpx;
	color: #ab61ff;
	font-size: 26rpx;

	image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5rpx;
		margin-left: 26rpx;
	}
}

.tdxy {
	width: 690rpx;
	height: 159rpx;
	background: #f5f5f9;
	border-radius: 20rpx;

	.word {
		display: flex;
		align-items: center;

		image {
			width: 41rpx;
			height: 37rpx;
		}

		text {
			color: #4b9cff;
			font-size: 30rpx;
			margin-left: 16rpx;
		}
	}
}

.scsj {
	color: #0d1d36;
	font-size: 26rpx;
}

.sctime {
	display: flex;
	align-items: center;
	color: #888d99;
	font-size: 30rpx;
	margin-left: 20rpx;
}

.ty {
	width: 18rpx;
	height: 18rpx;
	background: #888d99;
	border-radius: 50%;
}

.xmjz {
	color: #888d99;
	font-size: 30rpx;
	margin-left: 20rpx;
}

.xx {
	width: 2rpx;
	height: 2rpx;
	border: 2rpx dashed #888d99;
	opacity: 0.5;
	margin-left: 7rpx;
}

.zxjz {
	color: #0d1d36;
	font-size: 30rpx;
	font-weight: bold;
	margin-left: 40rpx;
}

.tp {
	width: 192rpx;
	height: 192rpx;
	border-radius: 10rpx;
	background-color: #f5f5f9;
	margin-left: 30rpx;
	margin-top: 24rpx;
}

.tyqk {
	color: #0d1d36;
	font-size: 26rpx;
}

.hekuai {
	color: #ffffff;
	font-size: 26rpx;
	width: 72rpx;
	height: 32rpx;
	background: #4f5a78;
	border-radius: 4rpx;
	text-align: center;
	line-height: 32rpx;
	margin-left: 22rpx;
}

.sd {
	width: 48rpx;
	height: 48rpx;
}

.word {
	display: flex;
	align-items: center;

	image {
		width: 41rpx;
		height: 37rpx;
	}

	text {
		color: #4b9cff;
		font-size: 30rpx;
		margin-left: 16rpx;
	}
}

.qymc {
	width: 102rpx;
	height: 118rpx;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 bottom;

	text {
		color: #888d99;
		font-size: 20rpx;
		line-height: 118rpx;
		margin-left: 8rpx;
	}
}

.bzj {
	position: absolute;
	left: 550rpx;
	font-size: 36rpx;
	color: #fe5022;
}

.caozuo {
	width: 690rpx;
	height: 124rpx;
	background-color: #f5f5f9;
	margin-top: -10rpx;

	.baocun {
		width: 160rpx;
		height: 64rpx;
		background: #4b9cff;
		border-radius: 10px;
		color: #ffffff;
		font-size: 30rpx;
		line-height: 64rpx;
	}

	.quxiao {
		width: 160rpx;
		height: 64rpx;
		background: #ffffff;
		border-radius: 10rpx;
		color: #888d99;
		font-size: 30rpx;
		line-height: 64rpx;
	}
}

.sc {
	display: flex;
	align-items: center;
	width: 136rpx;
	height: 52rpx;
	border: 2rpx solid #ab61ff;
	border-radius: 26rpx;
	color: #ab61ff;
	font-size: 26rpx;

	image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5rpx;
		margin-left: 26rpx;
	}
}

.qylg {
	width: 102rpx;
	height: 118rpx;
	background-size: 100% auto;
	background-position: 0 bottom;
	text-align: center;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text {
		color: #888d99;
		font-size: 20rpx;
		padding: 0 5rpx;
	}
	.tz {position: absolute;bottom:0;right:0;color:#fff;}
}

.f-list {
	border-bottom: 2rpx solid #dadfed;
}

.name {
	font-size: 28rpx;
	color: #4c9cff;
}

.tz {
	padding:0 5rpx;
	color: #ffffff;
	font-size: 24rpx;
	height: 36rpx;
	background: #ab61ff;
	border-radius: 6rpx;
	margin-left: 20rpx;
}
.td {
	padding:0 5rpx;
	color: #ffffff;
	font-size: 24rpx;
	height: 36rpx;
	background: #19C07D;
	border-radius: 6rpx;
	margin-left: 20rpx;
}

.xz {
	width: 114rpx;
	height: 50rpx;
	background: #4c9cff;
	border-radius: 25rpx;
	color: #ffffff;
	font-size: 26rpx;
	text-align: center;
	line-height: 50rpx;
	float: right;
}

.rq {
	font-size: 28rpx;
	color: #888e9a;
}

.wjdx {
	font-size: 28rpx;
	color: #888e9a;
	margin-left: 20rpx;
}

.scroll-view_H {
	white-space: nowrap;

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 100px;
	}

	.uni-bg-red {
		background: red;
	}

	.uni-bg-green {
		background: green;
	}

	.uni-bg-blue {
		background: blue;
	}
}
.swiper {
	height: 500rpx;
}
.team-bg {background-color: #fff;}
</style>
